<!--
 * @Author: Li Zengkun
 * @Date: 2022-07-26 09:49:40
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-07-26 10:01:42
 * @Description: 搜索
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
    <title>搜索</title>
</head>

<body>
    <header>
        <a href="#">
            <img src="../img/右箭头.png" alt="">
        </a>
        搜索
    </header>

    <form action="#">
        <input type="text" name="name" placeholder="玛卡咯嘛">
        <span class="btn">
            <i class="fa fa-search" aria-hidden="true"></i>
        </span>
    </form>
    <div class="hot-search">
        <div class="title">热门搜索</div>
        <ul class="tags-list">
            <li class="tag">羽绒服</li>
            <li class="tag">四件套</li>
            <li class="tag">手表</li>
            <li class="tag">火车</li>
            <li class="tag">飞机</li>
            <li class="tag">大炮</li>
            <li class="tag">羽绒服</li>
            <li class="tag">羽绒服</li>
            <li class="tag">四件套</li>
            <li class="tag">手表</li>
            <li class="tag">火车</li>
            <li class="tag">飞机</li>
            <li class="tag">大炮</li>
            <li class="tag">羽绒服</li>
            <li class="tag">羽绒服</li>
            <li class="tag">四件套</li>
            <li class="tag">手表</li>
            <li class="tag">火车</li>
            <li class="tag">飞机</li>
            <li class="tag">大炮</li>
            <li class="tag">羽绒服</li>
            <li class="tag">羽绒服</li>
            <li class="tag">四件套</li>
            <li class="tag">手表</li>
            <li class="tag">火车</li>
            <li class="tag">飞机</li>
            <li class="tag">大炮</li>
            <li class="tag">羽绒服</li>
        </ul>
    </div>
</body>


<style>
    form {
        width: 100%;
        padding: 2.4vw 2.67vw;
        display: flex;
        box-sizing: border-box;
        justify-content: space-between;
    }
    
    form>input {
        width: 80.8vw;
        height: 8.93vw;
        background-color: #f4f8f7;
        border-radius: 2vw;
        border: none;
        text-indent: 3.33vw;
        font-size: 3.47vw;
        color: #7d7d7d;
    }
    
    form .btn {
        width: 10.4vw;
        height: 8.93vw;
        background-color: #c55a5c;
        border-radius: 0.53vw;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 4.13vw;
    }
    
    .hot-search {
        width: 100%;
        padding: 2.4vw 2.67vw;
        font-size: 3.47vw;
        line-height: 3.47vw;
        letter-spacing: 0vw;
        color: #999999;
    }
    
    .hot-search .tags-list {
        margin-top: 4.67vw;
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        gap: 2.67vw;
    }
    
    .hot-search .tags-list .tag {
        cursor: pointer;
        height: 6.4vw;
        padding: 0 2.4vw;
        border-radius: 0.67vw;
        border: solid 0.13vw #e4e4e4;
        font-size: 2.93vw;
        line-height: 6.4vw;
        color: #c8c8c8;
    }
</style>

</html>